<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">我的预约</text>
    </view>

    <!-- 预约列表 -->
    <scroll-view scroll-y class="list">
      <view
        v-for="item in reservations"
        :key="item.id"
        class="reservation-card"
      >
        <view class="row"><text class="label">服务：</text><text class="value">{{ item.serviceName }}</text></view>
        <view class="row"><text class="label">门店：</text><text class="value">{{ item.storeName }}</text></view>
        <view class="row"><text class="label">宠物：</text><text class="value">{{ item.petName }}</text></view>
        <view class="row"><text class="label">时间：</text><text class="value">{{ item.date }} {{ item.timeSlot }}</text></view>
        <view class="row"><text class="label">状态：</text><text class="value">{{ statusMap[item.status] }}</text></view>

        <!-- 操作按钮 -->
        <view class="btn-row">
          <button size="mini" @click="openEditPopup(item)">修改</button>
          <button size="mini" type="warn" @click="cancelReservation(item)">取消</button>
        </view>
      </view>
    </scroll-view>

    <!-- 修改预约弹窗 -->
    <view v-if="showEditPopup" class="popup-mask" @click="closeEditPopup">
      <view class="popup" @click.stop>
        <text class="popup-title">修改预约</text>

        <view class="form">
          <!-- 修改日期 -->
          <picker mode="date" :value="editForm.date" @change="onDateChange">
            <view class="picker">日期：{{ editForm.date }}</view>
          </picker>

          <!-- 动态时间段 -->
          <picker mode="selector" :range="timeSlots" :value="timeSlots.indexOf(editForm.timeSlot)"
                  @change="e => editForm.timeSlot = timeSlots[e.detail.value]">
            <view class="picker">时间段：{{ editForm.timeSlot || '请选择' }}</view>
          </picker>
        </view>

        <view class="popup-btns">
          <button @click="closeEditPopup">取消</button>
          <button type="primary" @click="submitEdit">保存</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js'

export default {
  data() {
    return {
      reservations: [],
      statusMap: { 0: '待使用', 1: '已使用', 2: '已过期', 3: '已取消' },
      showEditPopup: false,
      editForm: {
        id: null,
        storeId: null,
        serviceId: null,
        date: '',
        timeSlot: ''
      },
      timeSlots: []
    }
  },
  onShow() {
    this.loadReservations()
  },
  methods: {
    async loadReservations() {
      const user = uni.getStorageSync('user')
      if (!user || !user.userId) {
        uni.showToast({ title: '请先登录', icon: 'none' })
        return
      }
      const res = await request({ url: `/reservation/list`, method: 'GET', data: { userId: user.userId } })
      if (res.code === 200) this.reservations = res.data || []
    },

    openEditPopup(item) {
      this.editForm = { ...item }
      this.showEditPopup = true
      this.loadTimeSlots()
    },
    closeEditPopup() { this.showEditPopup = false },

    async onDateChange(e) {
      this.editForm.date = e.detail.value
      await this.loadTimeSlots()
    },

    async loadTimeSlots() {
      if (!this.editForm.storeId || !this.editForm.serviceId || !this.editForm.date) return
      const res = await request({
        url: `/service-schedule/list`,
        method: 'GET',
        data: { storeId: this.editForm.storeId, serviceId: this.editForm.serviceId, date: this.editForm.date }
      })
      if (res.code === 200) {
        this.timeSlots = res.data.map(s => s.timeSlot)
      }
    },

    async submitEdit() {
      const res = await request({
        url: '/reservation/update',
        method: 'PUT',
        data: this.editForm
      })
      if (res.code === 200) {
        uni.showToast({ title: '修改成功', icon: 'success' })
        this.showEditPopup = false
        this.loadReservations()
      }
    },

    async cancelReservation(item) {
      const confirm = await new Promise(resolve => {
        uni.showModal({
          title: '提示',
          content: '确定要取消该预约吗？',
          success: res => resolve(res.confirm)
        })
      })
      if (!confirm) return
      const res = await request({ url: `/reservation/${item.id}/cancel`, method: 'PUT' })
      if (res.code === 200) {
        uni.showToast({ title: '取消成功', icon: 'success' })
        this.loadReservations()
      }
    }
  }
}
</script>

<style scoped>
.container { min-height: 100vh; background: #f8f8f8; }
.header { padding: 20rpx; text-align: center; background: #fff; font-weight: 600; font-size: 34rpx; }
.list { padding: 20rpx; }
.reservation-card { background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05); }
.row { display: flex; margin-bottom: 10rpx; }
.label { width: 120rpx; font-size: 28rpx; color: #666; }
.value { font-size: 28rpx; color: #333; }
.btn-row { display: flex; justify-content: flex-end; gap: 20rpx; margin-top: 10rpx; }
/* 弹窗 */
.popup-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; }
.popup { background: #fff; padding: 30rpx; border-radius: 16rpx; width: 80%; }
.popup-title { font-size: 32rpx; font-weight: 600; margin-bottom: 20rpx; display: block; }
.form { display: flex; flex-direction: column; gap: 20rpx; }
.picker { padding: 20rpx; border: 1rpx solid #ddd; border-radius: 8rpx; font-size: 28rpx; color: #333; }
.popup-btns { margin-top: 20rpx; display: flex; justify-content: flex-end; gap: 20rpx; }
</style>
